<template>
  <!-- 歌曲列表详情 -->
  <div class="songListDetails">

    <div class="detailsHeader" :style="{
      'background-image': `url(${listItem.picUrl || listItem.al.picUrl})`
    }">
      <div class="detailsHeaderInner">
        <div class="x" @click="noShowDetail">x</div>
        <div class="image"><imgItem :item="listItem"></imgItem></div>
        <div class="name">{{ listItem.name }}</div>
      </div>
    </div>

    <div class="title">歌曲列表</div>

    <div class="songList">
        <musicList :musicList="songList" @play="$emit('play1',$event)"></musicList>
    </div>

  </div>
</template>

<script>
import imgItem from './imgItem.vue';
import musicList from './musicList.vue';
export default {
  name: "MusicSongListDetails",
  data() {
    return {
      songList: [],
    };
  },
  computed: {
    listItem: {
      get() {
        return this.$store.state.listItem;
      },
      set() {},
    },
  },
  components:{
    imgItem,
    musicList
  },
  methods: {
    // 点击关闭组件
    noShowDetail() {
      this.$emit("showDetail");
    },
    getNewList() {
      this.$axios.get("/playlist/detail?id=" + this.listItem.id).then((res) => {
        // console.log(...res.data.privileges);
        let listId = res.data.privileges.map((item) => {
          return item.id;
        });

        var str = "";
        listId.forEach((_, i) => {
          str += _ + ",";
        });
        str = str.slice(0, str.length - 1);
        // console.log("str =>", str);
        this.$axios.get("/song/detail?ids="+str).then(res=>{
            // console.log(res.data.songs);
            let arr=res.data.songs.map((item) => {
              item.song = {
                //歌曲别名
                alia: item.alia,
                //歌曲码率
                privilege: {},
                //歌手
                artists: item.ar,
                album: item.al,
              };
              return item;
            });
            // console.log(arr);
            arr.forEach(item=>this.$set(item.song.privilege,"maxbr",0))
            // console.log(arr);
            this.songList=arr
        })
      });
    },
  },
  created() {
    this.getNewList();
    // console.log(this.listItem);
    // console.log(this.songList);
  },
};
</script>

<style lang="scss" scoped>
.songListDetails {
  width: 100vw;
  height: 100%;
  z-index: 20;
  background: #fff;
  .detailsHeader {
    width: 100vw;
    height: 28vh;
    background-position:45% 25%;
    .detailsHeaderInner{
        width: 100%;
        height: 100%;
        backdrop-filter: blur(30px);
        // display: flex;
        // justify-content: space-around;
        .x{
            color: #fff;
            font-size: 24px;
            line-height: 24px;
            position: absolute;
            top: 2%;
            left: 2%;
        }
        .image{
            width: 35%;
            position: absolute;
            top: 15%;
            left: 7%;
        }
        .name{
            width: 43vw;
            color: #fff;
            font-size: 18px;
            position: absolute;
            right: 7%;
            top: 15%;
        }
    }
  }
  .title{
    background: #eeeff0;
    font-size: 8px;
    padding: 2px 5px;
  }
  .songList{
    // width: 100vw;
    // height: 100%;
    // background: #fff;
    margin-bottom: 4vh;
  }
}
</style>